<template>
  <div class="paramDialog">
    <el-dialog
      :visible.sync="visable"
      width="780px"
      title="参数选择"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="dialog-body">
        <el-tabs v-model="active">
          <el-tab-pane
            v-for="item in paramTabs"
            :key="item.k"
            :label="item.v"
            :name="item.k"
          >
          </el-tab-pane>

        </el-tabs>
        <el-transfer
          v-model="propertyIds"
          :data="list"
          :props="{
            key: 'property_id',
            label: 'name',
          }"
          filterable
          :filter-method="filterMd"
          filter-placeholder="参数名称"
          :render-content="renderTransfer"
          :titles="['可选参数', '已选参数']"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">
          {{template_id ? '取 消' : '上一步'}}
        </el-button>
        <el-button type="primary" @click="sure">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api";
export default {
  props: {
    cnc: {
      type: String,
      default: "",
    },
    template_id: {
      type: String,
      default: "",
    },
    rememberActive: {
      type: String,
      default: "0",
    },
    rememberIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      active: this.rememberActive,
      visable: true,
      propertyIds: [],
      list: [],
      paramTabs: [],
    };
  },
  watch: {
    active() {
      this.setTranser()
    }
  },
  methods: {

    filterMd(query, item) {
      return item.name.indexOf(query) > -1;
    },

    cancel() {
      let type = this.template_id ? '取 消' : '上一步'
      this.$emit("cancel", [type, this.active]);
    },

    sure() {
      this.$emit("sure", [this.propertyIds, this.active]);
    },

    init() {
      this.downList();
      if (this.template_id) {
        this.updateCheckList();
      } else {
        this.addCheckList();
      }
      
    },

    setTranser() {
      this.list = this.bigList.filter(d => {
        if (d.data_type == this.active) {
          d.disabled = d.isuse == '1'
          return d
        }
      })
      this.list.forEach((d) => {
        if (d.checked == "1") {
          this.propertyIds.push(d.property_id)
        }
      })
      
      this.propertyIds = this.rememberIds.length ? [...this.rememberIds] : [...new Set(this.propertyIds)]
      console.log("获取： ", this.propertyIds)
    },

    
    renderTransfer(h, {name, isuse}) {
      return (
        <div class="transfer-label">
          <div>{name} {isuse == '1' ? '(该条数据已被使用)' : ''}</div>
        </div>
      )
    },

    async downList() {
      const { code, data } = await api.dropdown(this).downList({
        type: "data_type",
      });
      if (code === 0) {
        this.paramTabs = data;
      }
    },

    async updateCheckList() {
      const { code, data } = await api.template(this).updateCheckList({
        template_id: this.template_id,
      });
      if (code === 0) {
        this.bigList = data
        this.setTranser();
      }
    },

    async addCheckList() {
      const { code, data } = await api.template(this).addCheckList({
        cnc: this.cnc,
      });
      if (code === 0) {
        this.bigList = data
        this.setTranser();
      }
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="stylus">
.tab-row {
  height: getPx(40);
  margin: 0 0 getPx(20) 0;
  flexMiddle(center);

  .tab-btn {
    margin-right: getPx(20);
    border-radius: getPx(40);
    height: getPx(40);
    width: getPx(90);
    cursor: pointer;
    font-size: getPx(14);
    border: 1px solid $border-color;
    color: $secondary-color;
    flexMiddle(center);

    &.active {
      color: #fff;
      background: $primary;
    }
  }
}
</style>